const path = require('path');
/** 骨架屏 */
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');
/** gzip压缩 */
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
/** 分析代码体积工具 */
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
/** 开发环境 */
const DEV = process.env.NODE_ENV !== 'production';

module.exports = {
  publicPath: './',
  productionSourceMap: DEV, //取消.map文件产生
  transpileDependencies: ['js-base64'],
  configureWebpack: {
    plugins: [
      //gzip压缩
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8,
      }),
      // 骨架屏
      new SkeletonWebpackPlugin({
        // 实例化插件对象
        webpackConfig: {
          entry: {
            app: path.join(__dirname, './src/skeleton.js'), // 引入骨架屏入口文件
          },
        },
        minimize: true, // SPA 下是否需要压缩注入 HTML 的 JS 代码
        quiet: true, // 在服务端渲染时是否需要输出信息到控制台
        router: {
          mode: 'hash', // 路由模式
          routes: [
            // 不同页面可以配置不同骨架屏
            // 对应路径所需要的骨架屏组件id，id的定义在入口文件内
            { path: '/', skeletonId: 'homeSkeleton' },
            { path: '/about', skeletonId: 'aboutSkeleton' },
          ],
        },
      }),
    ],
  },
  chainWebpack: (config) => {
    if (!DEV) {
      //公共代码抽离
      config.optimization.splitChunks({
        cacheGroups: {
          // jsBase64: {
          //   test: /[\\/]node_modules[\\/]js-base64[\\/]/,
          //   name: 'jsBase64',
          //   minSize: 3000, //默认值为 30000（30 KB）
          //   minChunks: 1, //默认值为 1 被引用超过指定次数后才会被拆分
          //   chunks: 'all',
          // },
          vendors: {
            name: `chunk-vendors`,
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
            chunks: 'initial',
          },
          common: {
            name: `chunk-common`,
            minChunks: 2,
            priority: -20,
            chunks: 'initial',
            reuseExistingChunk: true,
          },
        },
      });
    }
    // 代码分析插件
    if (DEV) {
      config
        .plugin('webpack-bundle-analyzer')
        .use(BundleAnalyzerPlugin)
        .init(
          (Plugin) =>
            new Plugin({
              analyzerMode: 'server', // 在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。
              analyzerHost: '127.0.0.1',
              analyzerPort: 3000,
              defaultSizes: 'parsed', // 模块大小默认显示在报告中。应该是`stat`，`parsed`或者`gzip`中的一个。
              openAnalyzer: true, // 在默认浏览器中自动打开报告
              logLevel: 'info', // 日志级别
            }),
        );
    }
    // 在这里设置 需要cdn的依赖和插件 版本号一定要跟package.json中的一致,否则无效;
    config.set('externals', {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      vant: 'vant',
      vuex: 'Vuex',
      axios: 'axios',
    });
    return config;
  },
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    //*****必须配置为true否则骨架屏无效*****
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    //因为配置了loaderOptions.css, 尽管requireModuleExtension的值为默认值，我们也需要指出
    requireModuleExtension: true,
  },
};
